<template>
  <!-- 无图片 -->
  <div class="hd">
    <div class="txtClass" v-if="property.showTxt" :style="{
          color: property.txtColor,
          paddingLeft: property.txtPadding+'px',
          paddingRight: property.txtPadding+'px',
          height: property.txtHeight+'px',
          fontSize: property.txtFontSize+'px',
          fontWeight: property.weight?'bold':'400',
    }">{{ property.txt }}</div>
    <div class="countdown" :style="{
          color: property.skillTxtColor,
          fontSize: property.skillFontSize+'px',
          fontWeight: property.skillWeight?'bold':'400',
    }">
      <template v-if="false">
        <span class="time-item">{{ days }}</span>天
        <span class="time-item">{{ months }}</span>月
        <span class="time-item">{{ years }}</span>年
      </template>
      <span class="time-item">{{ hours }}</span>时
      <span class="time-item">{{ minutes }}</span>分
      <span class="time-item">{{ seconds }}</span>秒
    </div>
  </div>
</template>
<script setup lang="ts">
import { SeckillProperty } from './config'
import { ref, onMounted, onUnmounted } from 'vue'

/** 秒杀 */
defineOptions({ name: 'Seckill' })

const props = defineProps<{ 
  property: SeckillProperty,
}>()

const years = ref('00')
const months = ref('00')
const days = ref('00')
const hours = ref('00')
const minutes = ref('00')
const seconds = ref('00')

let timer

watch(
	()=> props.property.endTime,
  (val) => {
    if (!val) {
      return
    }
    clearInterval(timer)
    updateCountdown()
    timer = window.setInterval(updateCountdown, 1000)
  }
)

const updateCountdown = () => {
  console.log(props)
  if (!props.property.endTime) return
  var timeString = props.property.endTime; // 时分秒字符串
  var currentDate = new Date(); // 当前日期对象
  var timeArray = timeString.split(':'); // 将时分秒字符串拆分为数组
  currentDate.setHours(Number(timeArray[0]), Number(timeArray[1]), Number(timeArray[2])); // 设置当前日期的时分秒
  var end = currentDate.getTime(); // 获取时间戳
  console.log(end); // 输出时间戳
  
  const now = new Date().getTime()
  const diff = end - now

  if (diff <= 0) {
    years.value = '00'
    months.value = '00'
    days.value = '00'
    hours.value = '00'
    minutes.value = '00'
    seconds.value = '00'
    return
  }

  const totalSeconds = Math.floor(diff / 1000)
  const totalMinutes = Math.floor(totalSeconds / 60)
  const totalHours = Math.floor(totalMinutes / 60)
  const totalDays = Math.floor(totalHours / 24)
  const totalMonths = Math.floor(totalDays / 30)
  const totalYears = Math.floor(totalMonths / 12)

  years.value = String(totalYears).padStart(2, '0')
  months.value = String(totalMonths % 12).padStart(2, '0')
  days.value = String(totalDays % 30).padStart(2, '0')
  hours.value = String(totalHours % 24).padStart(2, '0')
  minutes.value = String(totalMinutes % 60).padStart(2, '0')
  seconds.value = String(totalSeconds % 60).padStart(2, '0')
}

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped lang="scss">
/* 图片 */
img {
  display: block;
  width: 100%;
  height: 100%;
}
.hd{
  display: flex;
  align-items: center;
  justify-content: center;
}
.txtClass{
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  
  .time-item {
    display: inline-block;
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #333;
    color: #fff;
    border-radius: 4px;
    margin: 0 2px;
    padding: 0 4px;
  }
}
</style>
